<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            text-transform: uppercase;  
        }
        /* 
            text-transform 设置字母的大小写
            uppercase 全部转换为大写字母
            lowercase 全部转换为小写字母
            capitalize 每个单词的首字母大写
        */
        
        .d1 {
            text-transform: uppercase;
        }
        .d2 {
            text-transform: lowercase;
        }
        .d3 {
            text-transform: capitalize;
        } 
    </style>
</head>
<body>
    <div>12334abcd您好!@#</div>
    <div class="d1">There is a poor man. He has an orange tree. On the tree there are many fine 
        oranges. One of them is very, very big. It is as big as a football. Nobody sees so big 
        an orange. The poor man is very pleased</div>
    <div class="d2">THERE IS A POOR MAN. HE HAS AN ORANGE TREE. ON THE TREE THERE ARE MANY FINE ORANGES. ONE OF THEM IS VERY, VERY BIG. IT IS AS BIG AS A FOOTBALL. NOBODY SEES SO BIG AN ORANGE. THE POOR MAN IS VERY PLEASED</div>
    <div class="d3">there is a poor man. he has an orange tree. on the tree there are many fine oranges. one of them is very, very big. it is as big as a football. nobody sees so big an orange. the poor man is very pleased</div>
</body>
</html>